import React, {Component} from 'react';

/* 
    使用children props: 通过组件标签体传入结构
		使用render props: 通过组件标签属性传入结构, 一般用render函数属性
    相当于一个插槽


    <A render={(data) => <C data={data}></C>}></A>
	A组件: {this.props.render(内部state数据)}
	C组件: 读取A组件传入的数据显示 {this.props.data} 
*/

export default class DemoRenderProps extends Component {
	render() {
		return (
			<div>
				<h1>我是父组件</h1>
				{/* <E>children传值</E> */}
				<E render={parm => <F parm={parm} />} />
			</div>
		);
	}
}

class E extends Component {
	render() {
		return (
			<div>
				<h1>我是子组件的E</h1>
				<h3>父组件传入的值{this.props.children}</h3>
				{this.props.render('我是传过来的参数芜湖')}
			</div>
		);
	}
}

class F extends Component {
	render() {
		return (
			<div>
				<h1>我是孙组件F</h1>
				<h3>{this.props.parm}</h3>
			</div>
		);
	}
}
